<template>
    <div class="transfer-container">
        <div class="transfer-card">
            <div class="card-header">
                <h2>转账服务</h2>
                <p class="subtitle">安全便捷的转账体验</p>
            </div>
            <div class="transfer-form">
                <div class="form-group">
                    <label>收款卡号</label>
                    <div class="input-wrapper">
                        <i class="el-icon-bank-card"></i>
                        <input type="text" v-model="receiverCardno" placeholder="请输入收款人卡号">
                    </div>
                </div>
                <div class="form-group">
                    <label>转账金额</label>
                    <div class="amount-input">
                        <span class="currency">¥</span>
                        <input type="number" v-model="amount" placeholder="请输入转账金额">
                    </div>
                    <span class="amount-tips" v-if="amount">大写：{{convertToChinese(amount)}}</span>
                </div>
                <div class="form-group">
                    <label>备注信息</label>
                    <div class="input-wrapper">
                        <i class="el-icon-notebook-2"></i>
                        <input type="text" v-model="remark" placeholder="请输入转账备注（选填）" maxlength="50">
                    </div>
                    <span class="remark-counter">{{remark.length}}/50</span>
                </div>
                <div class="form-actions">
                    <button class="btn-reset" @click="resetForm" :disabled="loading">
                        <i class="el-icon-refresh"></i> 重置
                    </button>
                    <button class="btn-submit" @click="submitTransfer" :disabled="loading">
                        <i class="el-icon-right"></i> {{ loading ? '处理中...' : '确认转账' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* 添加在每个组件的 style 标签内的开头 */
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input, 
button, 
select, 
textarea {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: pointer;
}

input, 
textarea {
    cursor: text;
}
.transfer-container {
    min-height: 100vh;
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}

.transfer-card {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.card-header {
    text-align: center;
    margin-bottom: 40px;
}

h2 {
    color: #2c3e50;
    font-size: 32px;
    margin-bottom: 10px;
}

.subtitle {
    color: #606266;
    font-size: 16px;
}

.form-group {
    margin-bottom: 25px;
}

label {
    display: block;
    color: #2c3e50;
    font-size: 16px;
    margin-bottom: 10px;
}

input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

input:focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.amount-input {
    position: relative;
}

.currency {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #409EFF;
}

.btn-submit {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
}
</style>

<script>
export default {
    name: 'Transfer',
    data() {
        return {
            receiverCardno: '',
            amount: '',
            remark: '',
            loading: false,
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo
        }
    },
    methods: {
        convertToChinese(num) {
            const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            const units = ['', '拾', '佰', '仟', '万'];
            let result = '';
            const numStr = Math.floor(num).toString();
            
            for (let i = 0; i < numStr.length; i++) {
                const digit = parseInt(numStr[i]);
                const unit = units[numStr.length - 1 - i] || '';
                if (digit !== 0) {
                    result += digits[digit] + unit;
                } else {
                    if (result.charAt(result.length - 1) !== '零') {
                        result += '零';
                    }
                }
            }
            return result.replace(/零+$/, '') + '元整';
        },
        async submitTransfer() {
            if (!this.receiverCardno) {
                this.$message.warning('请输入收款人卡号')
                return;
            }
            if (!this.amount || this.amount <= 0) {
                this.$message.warning('请输入有效的转账金额')
                return;
            }

            this.loading = true;
            try {
                const token = this.$store.state.token;
                const res = await this.$axios({
                    method: 'get',
                    url: '/bank/transfer',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    params: {
                        cardno: this.receiverCardno,
                        balance: this.amount,
                        fromCardno: this.userInfo.cardno,
                        remark: this.remark
                    }
                });

                if (res.data.code === 0) {
                    this.$message.success('转账成功');
                    this.resetForm();
                } else {
                    this.$message.error(res.data.msg || '转账失败');
                }
            } catch (error) {
                this.$message.error('转账失败，请重试');
            } finally {
                this.loading = false;
            }
        },
        resetForm() {
            this.receiverCardno = '';
            this.amount = '';
            this.remark = '';
            this.loading = false;
        }
    }
}
</script>